<template>
  <div>
    <div class="header" >
      <van-nav-bar left-arrow @click-left="$router.back()" >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
           </template>
           </van-nav-bar>
          <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  
</form>
       
  </div>   
    <div class="top10" @scroll="scrollMe" ref="main">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'prolist2' : 'prolist1'">
              <li
                class="van-hairline--bottom"
                v-for="(item, index) in brandList"
                :key="index" @click="jumpTo(item.proid)"
              >
                <img :src="item.img1" alt="" />
                <div class="jdcc">
                  <h4>
                    <div class="van-multi-ellipsis--l2">
                   
                      {{ item.proname }}
                    </div>
                  </h4>
                  <p class="price">￥{{ item.originprice }}</p>
                </div>
              </li>
              <div class="toggle" @click="isShow = !isShow">
                <van-icon name="bars" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
     
      <div class="top" v-if="scrollTop>300" @click="backTop"><van-icon name="back-top" /></div>
    
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use( Toast );
import { getBrandPro } from "../api/kind";
export default {
data(){
    return {
      value: '',
      val:"",
      brand:"",
      brandList:[],
      loading: false,
      finished: false,
      isShow: true,
      scrollTop:0,
      timer:null,
      count:1
    }
},
methods: {
  onSearch() {
   
    },
    onCancel() {
      Toast('取消');
    },
  onLoad() {
    setTimeout(() => {
        getBrandPro({ count: this.count, limitNum: 12 ,category:this.$route.params.category,brand:this.$route.params.keyword}).then((data) => {
            //this.proList=data.data.data
             this.value=this.$route.params.keyword 
            this.loading = false;
            if (!data.data.data) {
              this.finished = true;
            } else {
              this.brandList = [...this.brandList, ...data.data.data];
              this.count++;
            }
          });
      }, 1000);
    
    },
      scrollMe(){
      this.scrollTop=this.$refs.main.scrollTop
    },
    backTop(){
    
      this.timer=setInterval(()=>{
          if(this.$refs.main.scrollTop<=0){
          
        clearInterval(this.timer)
      }
        this.$refs.main.scrollTop-=100
      },15)
     
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
},
created () {
   
}

}
</script>

<style scoped>
.top10 {
  margin-top: 10px;
  background: #fff;
  flex: 1;
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prolist1 li {
  width: 49%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 0.8rem;
}
.prolist2 li div {
  flex: 1;
}
.toggle {
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  height: 0.3rem;
  width: 0.3rem;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.3rem;
}
.header{
     display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

